<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="./lib/bootstrap.css">
</head>

<body>
    <form>
        <input type="file" name="myfile" id="myfile">
        <input type="button" value="提交" id="btn">
    </form>
    <div>
        <img src="" id="test">
    </div>
    <!-- bootstrap 中的进度条 -->
    <div class="progress" style="width: 500px; margin: 15px 10px;">
        <div class="progress-bar progress-bar-striped active" style="width: 0%" id="percent">
            0%
        </div>
    </div>
    <script type="text/javascript">
        // 文件上传：把本地的图片选择到表单当中，下一步点击提交按钮，把文件数据提交服务器
        // 服务器收到文件内容后会放到一个指定的磁盘中，并且向客户端返回文件的url地址
        // 客户端收到url地址后，可以设置到img标签的src属性中，这样图片就可以展示出来

        var btn = document.getElementById('btn')
        btn.onclick = function() {
            // 获取选中文件的内容
            // files名字是固定的，值的类型是伪数组，不能用数组的方法
            var file = document.getElementById('myfile').files[0]
            if (!file) {
                alert('请选择文件')
                return
            }
            // 需要基于FormData进行文件上传
            var fd = new FormData()
                // 将选中的文件添加到FormData当中
                // avatar 名称由后台接口规定，作用是：后台通过该名字得到上传的文件信息
            fd.append('avatar', file)

            // 把得到的文件内容进行上传
            var xhr = new XMLHttpRequest()
                // 监听文件上传的进度
            xhr.upload.onprogress = function(e) {
                    if (e.lengthComputable) {
                        // 计算上传进度
                        var num = Math.ceil((e.loaded / e.total) * 100)
                        console.log(num)
                            // 把num进度值更新到样式标签中
                        var p = document.getElementById('percent')
                            // 更新进度条效果
                        p.style = 'width: ' + num + '%'
                        p.innerHTML = num + '%'
                    }
                }
                // 文件上传完成后触发
            xhr.upload.onload = function(e) {
                // 文件上传完成后，修改进度条样式
                var p = document.getElementById('percent')
                    // 删除标签已有的类名
                p.classList.remove('progress-bar-striped', 'active')
                p.classList.add('progress-bar-success')
            }

            xhr.open('post', 'http://www.liulongbin.top:3006/api/upload/avatar')
                // 处理文件上传

            xhr.send(fd)

            xhr.onload = function() {
                // 该方法是onreadystatechange的改进版
                // 只有xhr.readyState值为4的时候才触发
                // console.log(xhr.readyState)
                if (xhr.status === 200) {
                    console.log(xhr.responseText)
                    var ret = xhr.responseText
                    ret = JSON.parse(ret)
                    var img = document.getElementById('test')
                    img.setAttribute('src', 'http://www.liulongbin.top:3006' + ret.url)
                }
            }
        }

        // xhr.onreadystatechange = function () {
        //   if (xhr.readyState === 4 && xhr.status === 200) {
        //     var ret = xhr.responseText
        //     ret = JSON.parse(ret)
        //     var img = document.getElementById('test')
        //     img.setAttribute('src', 'http://www.liulongbin.top:3006' + ret.url)
        //   }
        // }
        // }
    </script>
</body>

</html>